<template>
  <div class="listbox">
    <h2>房屋租赁明细登记表</h2>
    <table>
      <tr>
        <th>序号</th>
        <th>房屋号</th>
        <th>月租费用</th>
        <th>租赁人</th>
        <th>联系电话</th>
        <th>用水量(吨)</th>
        <th>单价(元)</th>
        <th class="light">水费(元)</th>
        <th>电表初始读数</th>
        <th>电表月底读数</th>
        <th>用电量(度)</th>
        <th>电费单价</th>
        <th class="light">电费(元)</th>
        <th>租赁面积(平米)</th>
        <th>单价(平米)</th>
        <th class="light">物业费(元)</th>
        <th class="light">租价合计(元)</th>
      </tr>
      <tr v-for="(item, index) in arr" :key="index">
        <td>{{ index + 1 }}</td>
        <td>{{ item.No }}</td>
        <td>{{ item.price }}</td>
        <td>{{ item.user }}</td>
        <td>{{ item.phone | fmtPhone }}</td>
        <td :class="{ i: item.water > 10 }">{{ item.water }}</td>
        <td>{{ item.waterprice }}</td>
        <td class="light">{{ item.water * item.waterprice }}</td>
        <td>{{ item.powerstart }}</td>
        <td>{{ item.powerend }}</td>
        <td>{{ item.powerend - item.powerstart }}</td>
        <td>{{ item.powerprice }}</td>
        <td class="light">
          {{ (item.powerend - item.powerstart) * item.powerprice }}
        </td>
        <td>{{ item.area }}</td>
        <td>{{ item.areaprice }}</td>
        <td class="light">{{ item.area * item.areaprice }}</td>
        <td class="light">
          {{
            (
              item.price +
              item.water * item.waterprice +
              (item.powerend - item.powerstart) * item.powerprice +
              item.area * item.areaprice
            ).toFixed(2)
          }}
        </td>
      </tr>
      <!-- <tr>
        <td>2</td>
        <td>A栋-1103</td>
        <td>2000</td>
        <td>周先生</td>
        <td>13599998888</td>
        <td>2</td>
        <td>5.5</td>
        <td class="light">11</td>
        <td>200</td>
        <td>260</td>
        <td>60</td>
        <td>1</td>
        <td class="light">60</td>
        <td>100</td>
        <td>3</td>
        <td class="light">300</td>
        <td class="light">2371</td>
      </tr> -->
      <tr>
        <td colspan="17">总计： {{ sum }} 元</td>
      </tr>
    </table>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
  data() {
    return {};
  },
  filters: {
    fmtPhone(phone) {
      phone += ""; //substring
      return `${phone.substr(0, 3)}****${phone.substr(7)}`;
    },
  },
  computed: {
    ...mapState(["arr"]),
    ...mapGetters(["sum"]),
  },
  methods: {},
};
</script>


<style lang="less" scoped>
.listbox {
  padding: 10px;
  h2 {
    background-color: #63388b;
    color: #fff;
    line-height: 60px;
    text-align: center;
  }
  table {
    border: 1px solid #000;
    border-collapse: collapse;
    width: 100%;
    margin-top: 20px;
    text-align: center;
    th,
    td {
      border: 1px solid #000;
      line-height: 35px;
    }
    .i {
      color: red;
      font-weight: bold;
    }

    .light {
      background-color: #e5d2d9;
    }
  }
}
</style>